<!doctype html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <link rel="stylesheet" media="all" type="text/css" href="style/style-demo.css">

    <script src="script/jquery-1.11.1.js"></script>
    <script src="script/jquery.easing-1.3.js"></script>
    <script src="script/jquery.mousewheel-3.1.12.js"></script>
    <script src="script/jquery.jcarousellite.js"></script>
</head>
<body>

<div id="jcl-demo">

    <!-- Demo 1 -->
    <h4 id="demo1">Default Configuration</h4><hr>
    <p>
        This is the default configuration.
        The carousel is created with the "next" and "prev" navigation buttons.
        You don't have to specify anything else unless you want to bend it to your will.
    </p><br>

    <div class="custom-container default">
        <a href="#" class="prev">&lsaquo;</a>
        <div class="carousel">
            <ul>
                <li><img src="image/1.jpg"></li>
                <li><img src="image/2.jpg"></li>
                <li><img src="image/3.jpg"></li>
                <li><img src="image/4.jpg"></li>
                <li><img src="image/5.jpg"></li>
                <li><img src="image/6.jpg"></li>
                <li><img src="image/7.jpg"></li>
                <li><img src="image/8.jpg"></li>
                <li><img src="image/9.jpg"></li>
                <li><img src="image/10.jpg"></li>
                <li><img src="image/11.jpg"></li>
            </ul>
        </div>
        <a href="#" class="next">&rsaquo;</a>
        <div class="clear"></div>
    </div>

<pre class="prettyprint">
$(".default .carousel").jCarouselLite({
    btnNext: ".default .next",
    btnPrev: ".default .prev"
});
</pre>

    <script type="text/javascript">
        $(function() {
            $(".default .carousel").jCarouselLite({
                btnNext: ".default .next",
                btnPrev: ".default .prev"
            });
        });
    </script>

</div>
</body>
</html>